//
// NoticeTabView.js
//
import React, { Component } from 'react'
import {
  View,
  Text,
  TouchableWithoutFeedback,
  StyleSheet,
} from 'react-native'

import HorizontalLine from '../Common/View/CommonHorizontalLine'

export default class NoticeTabView extends Component {
  constructor(props) {
    super(props)
  }

  render() {
      return (
         <View>
          <View style={{height:44,backgroundColor:'white',flexDirection:'row'}}>
              <TouchableWithoutFeedback key='left' style={{flexGrow:1}} onPress={()=>{
                this.props.tabSelected(0)
              }}>
                <View style={styles.tab}>
                  <Text style={styles.tabTitle}>上级通知111</Text>
                  <Text style={[styles.dot,styles.dot_n]}>3</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback key='right' style={{flexGrow:1}} onPress={()=>{
                this.props.tabSelected(1)
              }}>
                <View style={styles.tab}>
                  <Text style={styles.tabTitle}>已发通知</Text>
                  <Text style={[styles.dot,styles.dot_h]}>2222</Text>
                </View>
              </TouchableWithoutFeedback>
          </View>
          <HorizontalLine key='h-line'/>
        </View>
      )
  }
};

const styles = StyleSheet.create ({
  tab:{
    flexGrow:1,
    justifyContent:'center',
    flexDirection:'row'
  },
  tabTitle: {
    alignSelf:'center',
  },
  dot: {
    alignSelf:'center',
    height:16,
    minWidth:16,
    borderRadius:8,
    overflow:'hidden',
    textAlign:'center',
    color:'white',
    paddingLeft:5,
    paddingRight:5,
    paddingTop:1,
    fontSize:10,
    marginLeft:3,
  },
  dot_n: {
    backgroundColor:'#808080',
  },
  dot_h: {
    backgroundColor:'#0dc2ca'
  }
});
